<template>
    <div class="mainBox">
        <div class="title">
            开始预习
            <el-button size="medium" @click="goBack"> 返回 </el-button>
        </div>
        <el-card
            class="box-card"
            :style="
                data.background
                    ? 'background: url(' +
                      data.background +
                      ') no-repeat; background-size: 100% 100%;'
                    : ''
            "
        >
            <div slot="header" class="clearfix">
                <span>{{ name }}</span>
                <div style="float:right">
                    【作者】{{ data.author ? data.author : "未知" }}
                </div>
            </div>
            <div>译文</div>
            <div v-html="data.translation"></div>
        </el-card>
        <div class="box-card-button" @click="complete">
            完成预习
        </div>
    </div>
</template>

<script>
import {
    creatPreviewlog,
    getTranslationByZid,
    submintPreviewing
} from "@/api/test/work/index";
export default {
    components: {},
    props: {},
    data() {
        return {
            name: "",
            zid: "",
            user_log_id: "",
            user_log_kq_id: "",
            num: 0,
            fid: "",
            myHour: 0,
            myMinute: 0,
            mySecond: 0,
            duration: 0,
            time: 0,
            h: 0,
            i: 0,
            s: 0,
            data: {
                title: "1.沁园春·雪",
                name: "毛泽东",
                dynasty: "近代",
                mode: "译文对照",
                cont:
                    "北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。",
                translation: ""
            }
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.name = this.$route.query.name;
        this.user_log_id = this.$route.query.user_log_id;
        this.zid = this.$route.query.zid;
        this.num = this.$route.query.num;
        this.fid = this.$route.query.fid;
        console.log("num", this.num);
        this.createRecode();
        this.getText(this.zid);
    },
    methods: {
        /* 创建章节记录 */
        createRecode() {
            var data = {
                zid: this.zid,
                f_zid: this.fid,
                user_log_id: this.user_log_id
            };
            creatPreviewlog(data).then(res => {
                console.log("res", res);
                if (res.code == 200) {
                    this.user_log_kq_id = res.data.user_log_kq_id;
                    if (res.data.duration) {
                        this.duration = res.data.duration;
                        this.myHour = parseInt(this.duration / 3600);
                        var len1 = parseInt(this.duration - this.myHour * 3600);
                        this.myMinute = parseInt(len1 / 60);
                        this.mySecond = parseInt(len1 - this.myMinute * 60);
                        this.$forceUpdate();
                    } else {
                        this.myHour = 0;
                        this.myMinute = 0;
                        this.mySecond = 0;
                    }
                    console.log("duration", this.duration);
                    console.log("myHour", this.myHour);
                    console.log("myMinute", this.myMinute);
                    console.log("mySecond", this.mySecond);
                }
            });
        },
        /* 获取译文 */
        getText(zid) {
            var data = {
                zid: zid
            };
            getTranslationByZid(data).then(res => {
                if (res.code == 200) {
                    this.data = res.data;
                } else {
                    this.data.detail = "";
                }
                console.log("data", this.data);
            });
        },
        complete() {
            // var num = this.num;
            // if (num > 1) {
            this.$confirm("确定要完成预习", "预习", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.finish(2);
                    this.$router.go(-1);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消完成预习"
                    });
                });
            // } else {
            //     var time = Number(this.h * 3600 + this.i * 60 + this.s);
            //     this.time = Number(time / 3600).toFixed(1);
            //     console.log("time", this.time);
            // }
        },
        finish(type) {
            var time = Number(this.h * 3600 + this.i * 60 + this.s);
            var data = {
                zid: this.zid,
                user_log_id: this.user_log_id,
                user_log_kq_id: this.user_log_kq_id,
                is_submit: type,
                duration: time
            };
            console.log("参数", data);
            submintPreviewing(data).then(res => {
                if (res.code == 200) {
                    this.user_log_kq_id = res.data.user_log_kq_id;
                }
            });
        },
        goBack() {
            this.finish(1);
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        color: #2d3440;
    }
}
.box-card {
    margin-top: 30px;
    background-repeat: no-repeat;
}
.box-card-button {
    width: 440px;
    height: 40px;
    background: #018854;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 30px;
}
</style>
